#grid {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows:  auto auto 50px 70px 500px 50px;
    align-self: : center;
  }
  #image {
    grid-area: 1/2;
  }
  #header  {
    grid-area: 2/2;
    max-width: 700px;
    text-align: center;
    background: #888;
  }
  #top {
    grid-area: nav;
    max-width: 700px;
    text-align: center;
    background: #777;
  }
  #nav {
    grid-area: nav;
    max-width: 700px;
    background: #555;
  }
  #main {
    grid-area: 5/2;
    text-align: start;
    align-self: center;
    max-width: 700px;
    min-height: 500px;
    background: #999;
  }
  #footer {
    grid-area: 6/2;
    max-width: 700px;
    text-align: center;
    background: orange;
  }
  #youtube,
  #twitter,
  #patreon {
    grid-area: 6/1;
    text-align: start;
  }
  #navbuttons {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
  }

  #navbuttons li {
      float: left;
  }

  #navbuttons li  a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    /* Change the link color to #111 (black) on hover */
  #navbuttons a:hover {
        background-color: #111;
    }
body {
  background: black;
}